<template>
    <div style="height: auto;width: 99%;display: inline-block;margin-top: 37px;">
        <div v-if="news.length == 0">
            <div v-for="i in 2" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 120px">
                </el-skeleton>
            </div>
        </div>
        <div v-for="i in news" :key="i.id">
            <router-link :to="{ name: 'article', query: { id: i.id } }" class="title">
                {{ i.title }}</router-link>
            <el-divider border-style="dashed" />
        </div>
        <div class="more">
            <router-link :to="{ name: 'newArticle' }" class="more">更多></router-link>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
export default {
    name: "newComponents",
    setup() {
        let recommend = ref([])
        let news = ref([]);

        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getArticleByTag/",
                data: {
                    tag: "新闻资讯",
                    page: 1,
                    sizes: 8,
                },

                success(resp) {
                    news.value = resp.article;
                    // setTimeout(() => {
                    //     
                    // }, 2000)
                }
            })
        }
        getInfo();
        return {
            news,
            recommend,
        }
    }
}

</script>

<style scoped>
.title {
    color: black;
    text-decoration: none;
    width: 99%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 17px;
    display: inline-block;
}


.title:visited {
    color: black;
}

.title:hover {
    color: red;
}


.el-divider--horizontal {
    margin: 4px 0px;
}

.more {
    float: right;
    color: rgb(102, 102, 102);
    text-decoration: none;
}

.more :visited {
    text-decoration: none;
}

.more :hover {
    color: red;
}
</style>